<template>
  <div class="lineItem">
    <a-card :title="'映射区-系列' + ( item + 1 )" size="small">
      <a v-show="item !== 0" slot="extra" href="javascript:;" @click="$emit('reduceItem', item)">删除</a>
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 18 }"
      >
        <!-- 数据集 -->
        <a-form-model-item label="数据集" prop="datasetId">
          <a-select v-model="form.datasetId" placeholder="请选择数据集" @change="onSelectChange">
            <a-select-option :value="item.id" :key="item.id" v-for="item in DsList">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="X轴" prop="x">
          <a-select v-model="form.x" placeholder="请选择X轴">
            <a-select-option :value="item.name" v-for="item in output" :key="item.name" :disabled="item.name==form.y || item.name==form.x">
              {{ item.displayName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="Y轴" prop="y">
          <a-select v-model="form.y" placeholder="请选择Y轴">
            <a-select-option :value="item.name" v-for="item in output" :key="item.name" :disabled="item.name==form.y || item.name==form.x">
              {{ item.displayName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  export default {
    name: 'LineItem',
    props:['dataMapping', 'item', 'mapForm'],
    data() {
      return {
        form: {},
        rules:{
          datasetId: [
            { required: true, message: '数据集不能为空', trigger: 'change' }
          ],
          x: [
            { required: true, message: 'x轴映射字段不能为空', trigger: 'change' }
          ],
          y: [
            { required: true, message: 'y轴映射字段不能为空', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      ...mapState('custom', ['DsList']),
      output () {
        const abb = this.DsList.filter((v)=>{
          if (this.form.datasetId == v.id) {
            return v
          }
        })
        if (abb.length) {
          return JSON.parse(abb[0].output)
        } else {
          return []
        }
      }
    },
    watch: {
      form: {
        handler (value) {
          let name = '';
          for(let i = 0; i < this.output.length; i ++) {
            if (this.mapForm.type == 'strip') {
              if (this.output[i].name == value.x) {
                name = this.output[i].displayName
              }
            } else {
              if (this.output[i].name == value.y) {
                name = this.output[i].displayName
              }
            }
          }
          this.dataMapping[this.item] = {...value,name}
        },
        deep: true
      }
    },
    methods: {
      ...mapActions('custom', ['getDsList']),
      onSelectChange () {
        this.$set(this.form, 'x', '');
        this.$set(this.form, 'y', '');
      },
      loadDataset () {
        this.getDsList({id: this.$route.query.id})
      },
      onMapFieldSubmit () {
        let abb = null
        this.$refs.ruleForm.validate(valid => {
          abb = valid
        })
        return abb
      }
    },
    mounted() {
      this.form = {...this.dataMapping[this.item]}
      this.loadDataset()
    },
  }
</script>

<style scoped>
.lineItem {
  margin-bottom: 10px;
}
</style>